<script setup lang="ts">
import type { CardDateB } from "./scripts/card";
import { computed, onMounted, toRaw } from "vue";
import Copy from "@/components/copy/index.vue";
import JNumber from "@/components/j-number/index.vue";
import Operate from "./operate.vue";
import { useTokens } from "@/stores/tokens";
import { coverAction } from "@/comm/helper";

interface IItem {
    item: any;
}

const tokens = useTokens();
const props = defineProps<IItem>();

const action = computed(() => coverAction(props.item?.origin as any));

// const item: any = toRaw(props.item) as any;

onMounted(() => {
    // console.log('yzt', item);
});

const onLog = (item: any) => {
    console.log(item);
};

const getImg = (str: string) => {
    return tokens.getImg(str);
};

const onJumpCoin = (str: string) => {
    window.open("/token/" + str);
};

const isGreen = (item: any) => {
    return item.origin?.action == "deposit";
};
</script>
<template>
    <div class="card d-flex flex-column c-title-5" @click="onLog(item)" v-bind="$attrs">
        <!-- <div class="bgt" :class="item.origin.action">{{ item.origin.action || item.origin.type }}</div> -->

        <div class="act-tip">
            <template v-if="action.type == 'NORMAL'">
                <div class="act-n">On chain Token Flow</div>
            </template>

            <template v-else-if="action.type == 'CEX'">
                <div class="act-img" :class="{ win: action.up }"></div>
                <div class="act-w" :class="{ win: action.up }">CEX Token Flow</div>
            </template>

            <template v-else>
                <div class="act-img" :class="{ win: action.up }"></div>
                <div class="act-w" :class="{ win: action.up }">DEX Token Flow</div>
            </template>
            <div class="act-time">{{ item.time }}</div>
        </div>

        <template v-if="item.swap">
            <div class="row_1 d-flex">
                <Copy :text="item.origin.address" :num="4"></Copy>
                <!-- <div class="f-timer">{{ item.ago }}</div> -->
            </div>
            <div class="row_1 d-flex">
                <img :src="getImg(item.origin.inSymbol)" class="c-img" />
                <JNumber :is-color="true" :num="item.origin.inAmount"></JNumber>
                <div class="sby coin-link" @click="onJumpCoin(item.origin.inTokenAddress)">#{{ item.origin.inSymbol }}</div>
            </div>
            <div class="row_1 d-flex">
                <img :src="getImg(item.origin.outSymbol)" class="c-img" />
                <JNumber :is-color="true" :num="item.origin.outAmount"></JNumber>
                <div class="sby coin-link" @click="onJumpCoin(item.origin.outTokenAddress)">#{{ item.origin.outSymbol }}</div>
                <JNumber :num="item.origin.outusdt" :is-color="false" prefix="$" price></JNumber>
            </div>
        </template>
        <template v-else>
            <div class="row_1 d-flex">
                <Copy :text="item.origin.address || item.origin.fromTag" :num="4"></Copy>
                <VIcon style="color: #737b83">mdi mdi-arrow-right-thin</VIcon>
                <Copy :text="item.origin.toAddress || item.origin.toTag" :num="4"></Copy>
                <!-- <div class="f-timer">{{ item.ago }}</div> -->
            </div>
            <div class="row_1 d-flex">
                <img :src="getImg(item.origin.outSymbol)" class="c-img" />
                <JNumber :is-color="true" :num="item.origin.outAmount"></JNumber>
                <div class="sby coin-link" @click="onJumpCoin(item.origin.outTokenAddress)">#{{ item.origin.outSymbol }}</div>
                <JNumber :num="item.origin.outusdt" :is-color="false" prefix="$"></JNumber>
            </div>
        </template>

        <Operate class="row_3"></Operate>
    </div>
</template>

<style scoped lang="less">
.act-tip {
    display: flex;
    align-items: center;
    margin: 10px 10px 0;

    .act-img {
        width: 14px;
        height: 14px;
        background: url("@/assets/bad_d.png") no-repeat center;
        background-size: contain;
        &.win {
            background-image: url("@/assets/good_d.png");
        }
    }

    .act-w {
        margin-left: 7px;
        margin-right: auto;
        color: var(--lose);
        &.win {
            color: var(--win);
        }
    }

    .act-n {
        // margin-left: 7px;
        margin-right: auto;
        color: var(--main);
    }

    .act-time {
        color: var(--main);
    }
}

.card {
    border-radius: 4px;
    overflow: hidden;
    background: var(--card);
    margin-bottom: 10px;
    // pointer-events: none;

    .bgt {
        width: 80px;
        height: 22px;
        padding-inline-start: 12px;
        text-transform: capitalize;
        background: rgba(13, 203, 129, 0.6);
        display: flex;
        align-items: center;
        border-radius: 0 0 54px 0;
        color: #fff;

        &.swap {
            background: rgba(252, 194, 53, 0.6);
        }
    }

    .row_1 {
        margin: 15px 12px 0;
        align-items: center;
        overflow: hidden;

        &:last-child {
            margin-bottom: 12px;
        }
    }
}

.c-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    margin-right: 8px;
    border-radius: 50%;
    border: solid 1px rgba(240, 240, 240, 0.4);
}

.f-timer {
    margin-left: auto;
    white-space: nowrap;
    word-break: keep-all;
    color: #b1b6c6;
}

.sby {
    margin-right: auto;
    font-size: 14px;
}

.row_3 {
    margin: 12px;
}

:deep(.copy) {
    font-size: 14px !important;
}

:deep(.num-txt) {
    font-size: 14px !important;
}
</style>
